<template>
<div>
<el-page-header @back="goBack" :content="$t('common.content')">
</el-page-header>
  <div class="columns">
    <div class="column">
         <!--作者-->
      <Author
        v-if="flag"
        :user="topicUser"
      />
    </div>
    
    <!--文章详情-->
    <div class="column is-three-quarters">
      <!--主题-->
      <el-card
        class="box-card"
        shadow="never"
      >
        <div
          slot="header"
        >
          <p class="is-size-3 has-text-bold">{{ topic.title }}</p>
          <div class="has-text-grey is-size-7 mt-3">
            <span>{{$t('common.author')}}: {{ topicUser.alias }}</span>
            <el-divider direction="vertical" />
            <span>{{$t('common.view')}}: {{ topic.view }}</span>
            <el-divider direction="vertical" />
            <span><i class="el-icon-date"></i> {{ dayjs(topic.createTime).format('YYYY/MM/DD HH:mm:ss') }}</span>
          </div>
        </div>

        <!--Markdown-->
        <div id="preview" />

        <!--标签-->
        <nav class="level has-text-grey is-size-7 mt-6">
          <div class="level-left">
            <p class="level-item">
              <b-taglist>
                <router-link
                  v-for="(tag, index) in tags"
                  :key="index"
                  :to="{ name: 'tag', params: { name: tag.name } }"
                >
                  <b-tag type="is-info is-light mr-1">
                    {{ "#" + tag.name }}
                  </b-tag>
                </router-link>
              </b-taglist>
            </p>
          </div>
          <div
            v-if="token && user.id === topicUser.id"
            class="level-right"
          >
            <router-link
              class="level-item"
              :to="{name:'topic-edit',params: {id:topic.id}}"
            >
              <span class="tag"><i class="el-icon-edit">{{$t('common.edit')}}</i></span>
            </router-link>
            <a class="level-item">
              <span
                class="tag"
                @click="handleDelete(topic.id)"
              ><i class="el-icon-delete">{{$t('common.delete')}}</i></span>
            </a>
          </div>
        </nav>
      </el-card>
      <div style="margin-top:7px">
      <lv-comments :slug="topic.id" />
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import {  getTopic ,deleteTopic} from '@/api/post'
import { mapGetters } from 'vuex'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import Author from '@/views/post/Author'
import LvComments from '@/components/Comment/Comments'
export default {
  name: 'TopicDetail',
   components: { Author,LvComments },
  computed: {
    ...mapGetters([
      'token','user'
    ])
  },
  data() {
    return {
      flag: false,
      topic: {
        content: '',
        id: this.$route.params.id
      },
      tags: [],
      topicUser: {}
    }
  },
  mounted() {
    this.fetchTopic()
  },
  methods: {
    renderMarkdown(md) {
      Vditor.preview(document.getElementById('preview'), md, {
        hljs: { style: 'github' }
      })
    },
    // 初始化
    async fetchTopic() {
      getTopic(this.$route.params.id).then(response => {
        const { data } = response
        document.title = data.topic.title
        this.topic = data.topic
        this.tags = data.tags
        this.topicUser = data.user
        this.comments = data.comments
        this.renderMarkdown(this.topic.content)
        this.flag = true
      })
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTopic(id).then(value => {
          const { code, message } = value
          if (code === 200) {
          setTimeout(() => {
            this.$router.push({ path: '/' })
          }, 500)
          }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    goBack() {
        this.$router.push({ path: '/' })
      }
  }
}
</script>

<style>
#preview {
  min-height: 300px;
}
</style>
